<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>九九乘法表</title>
  </head>
  <script type="text/javascript">
    document.write("九九乘法表<hr />");
    // 列数变量 a
    var a = 1;
    // 行数变量 b
    var b = 1;
    // 以上变量定义可以省略

    /**
     * 整体思路
     * 遍历行数（循环F1），在F1中遍历列数（循环F2）。
     * 当列数变量a与行数变量b相等时跳到下一行的循环。
     * 涉及函数:for();break;以及算术运算。
    **/

    // 循环F1 遍历行数
    // 设置b的初始值为1，最终值为9 ，每次循环递增1
    for (b = 1; b <= 9; b++) {
      // 这里已经取得了行数，再利用循环获取列数a
      for (a = 1; a <= 9; a++) {
        // 获取了列数a
        document.write(a+"×"+b+"="+a*b+" ");
        if( a == b ){
          document.write("<br />");
          break;
        }
      }
    }

    document.write("<hr />");

    // 美化进阶
    var c,d;
    for (b = 1; b <= 9; b++) {
      for (a = 1; a <= 9; a++) {
        c = a*b; // 用变量c代替a*b的值
        // 判断乘积是否小于10并且不是第一列，同时满足这两个条件则输出两个空格
        d = (c < 10 && a != 1) ? "&nbsp;&nbsp;" : "";
        document.write(a+"×"+b+"="+c+"&nbsp;&nbsp;"+d);
        if( a == b ){
          document.write("<br />");
          break;
        }
      }
    }

  </script>
  <body></body>
</html>
